<template>
  <div id="student-view">
    <el-row>
      <el-col>
        <el-avatar
          shape="square"
          :size="150"
          src="http://q4.qlogo.cn/headimg_dl?dst_uin=2857734156&spec=100"
        ></el-avatar>
      </el-col>
    </el-row>
    <el-row style="overflow-x: scroll">
      <el-descriptions title="关于我" direction="vertical" :column="4" border>
        <el-descriptions-item label="工号"
          >{{ user.teacherNo }}</el-descriptions-item
        >
        <!-- <el-descriptions-item label="身份证号"
          >71032525646548978465132</el-descriptions-item
        > -->
        <el-descriptions-item label="全名" :span="2"
          >{{ user.teacherName }}</el-descriptions-item
        >
        <!-- <el-descriptions-item label="学院">计算机学院</el-descriptions-item> -->
        <el-descriptions-item label="电话"> {{ user.teacherPhone }} </el-descriptions-item>
        <el-descriptions-item label="邮箱"
          > {{ user.teacherEmail }} </el-descriptions-item
        >
        <el-descriptions-item label="性别"> {{ user.studentSex === 0 ? '男'  : '女'}} </el-descriptions-item>
        <el-descriptions-item label="出生日期">
          {{ new Date(user.teacherBirthday).toLocaleDateString()  }}
        </el-descriptions-item>
        <el-descriptions-item label="联系地址"
          > {{ user.teacherNowAddress }} </el-descriptions-item
        >
      </el-descriptions>
    </el-row>
    <el-row>
      <el-col>
        <p style="color: #333"><b> 个人介绍</b></p>
        <p class="desc">
           {{ user.teacherRecommend }}
        </p>
      </el-col>
    </el-row>
    <el-row>
      <el-col>
        <p style="color: #333">永久居住地址：</p>
        <p class="desc"> {{ user.teacherHomeAddress }} </p>
      </el-col>
    </el-row>
    <el-row>
      <el-col>
        <p style="color: #333">现居住地址：</p>
        <p class="desc"> {{ user.teacherNowAddress }} </p>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapState } from "vuex";

import { useGetTeacher } from "@/hooks/teacher";

export default {
  name: "TeacherView",
  data() {
    return {
      user: {},
    };
  },
  computed: {
    ...mapState("user",["userInfo"])
  },
  mounted() {
    (async () => {
      this.user = (await useGetTeacher(this.userInfo._id)).data?.teacher[0];
    })();
  },
  methods: {},
};
</script>

<style lang="scss" scoped></style>
